<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>室内定位-测试</title>
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <!-- build:css styles/vendor.css -->
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
    <!-- endbuild -->
    <!-- build:css styles/leaflet.css -->
    <link rel="stylesheet" href="/node_modules/leaflet/dist/leaflet.css" type="text/css" />
    <!-- endbuild -->
    <style>
        #map {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute !important;
        }

        #btn_group{
            z-index: 1000;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>

<body>
    <div id="btn_group">
        <button class="btn btn-primary" id="btn_setStart">起点</button>
        <button class="btn btn-primary" id="btn_setEnd">终点</button>
        <button class="btn btn-primary" id="btn_findRoute">寻路</button>
    </div>
    <div id="map"></div>

    <!-- build:js scripts/vendor.js -->
    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/turf.js -->
    <script type="text/javascript" src="/node_modules/@turf/turf/turf.min.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/tinyqueue.js -->
    <script type="text/javascript" src="/node_modules/tinyqueue/tinyqueue.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/leaflet.js -->
    <script type="text/javascript" src="/node_modules/leaflet/dist/leaflet.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/testlib.js -->
    <script src="scripts/route.js"></script>
    <script src="scripts/navigation.js"></script>
    <!-- endbuild -->
    <script>
        //加载地图及定位
        var token = 'pk.eyJ1IjoienhobTAwMSIsImEiOiJja3hoYXB4cDUzMW1jMm5xaGNwbG9vOHE4In0.mULK3RxNdcC8yDvmfj1BNQ';
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + token, {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'token'
        }).addTo(map);
        map.locate({setView: true, maxZoom: 14});

        //道路geojson,起点，终点
        var _road,_start,_end,_startMarker,_endMarker;
        var _route,_pathLine;

        //加载道路数据
        $.getJSON('./data/zhongnanlu.geojson',function(geojson){
            _road = geojson;
            L.geoJSON(_road,{
                style: function(feature) {
                    var roadStyle = {
                        color: "#ff0000",
                        weight: 1,
                        opacity: 0.65
                    };
                    roadStyle.weight = 1.5 + 3/feature.properties.level;
                    return roadStyle;
                }
            }).addTo(map);
            _route = new Route(_road);
        });


        //设置起点
        $('#btn_setStart').on('click',function(){
            if (_startMarker) {
                map.removeLayer(_startMarker);
                _startMarker = null;
            }
            map.once('click',function(event){
                _start = turf.point([event.latlng.lng,event.latlng.lat]);
                _startMarker = L.marker(event.latlng).addTo(map).bindPopup("起点").openPopup();
            })
        });

        //设置终点
        $('#btn_setEnd').on('click',function(event){
            if (_endMarker) {
                map.removeLayer(_endMarker);
                _endMarker = null;
            }
            map.once('click',function(event){
                _end = turf.point([event.latlng.lng,event.latlng.lat]);
                _endMarker = L.marker(event.latlng).addTo(map).bindPopup("终点").openPopup();
            });
        });

        //计算路径
        $('#btn_findRoute').on('click',function(){
            if (_pathLine) {
                map.removeLayer(_pathLine);
                _pathLine = null;
            }
            if (_route && _start && _end) {
                var path = _route.find(_start,_end);
                if (path) {
                    var pathLineString = turf.lineString(path.path, {name: 'path'});
                    _pathLine = L.geoJSON(pathLineString).addTo(map);
                }
                console.log(path);
            }
            else
            {
                alert("没有路径或没有起始点");
            }
        });

    </script>
</body>

</html>